<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>一鸣小画板</title>
    <style>
        canvas {
            background: #ccc;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<h1>一鸣小画板</h1>


<canvas width="900" height="1200"></canvas>
<script src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script>
<script>
    var goEasy = new GoEasy({
        host: 'hangzhou.goeasy.io',
        appkey: 'BC-6ae014e2ec2144dfb6273b346dee0955',
        onConnected: function () {
            console.log("Connect success");
            goEasy.publish({
                channel: "draw_line",
                message: JSON.stringify({content:'我进来啦'}),
                onSuccess: function () {
                    console.log("消息发布成功。");
                },
                onFailed: function (error) {
                    console.log("消息发送失败，错误编码：" + error.code + " 错误信息：" + error.content);
                }
            });
        },
        onConnectFailed: function (error) {
            console.log("Connect failed: ", JSON.stringify(error));
        }
    });

    //颜色随机
    function color16(){
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
        return color;
    }

    var canvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    context.lineWidth = 5;

    var line = [];
    var Point = function (senderId, move,color, x, y) {
        this.senderId = senderId;
        this.move = move;
        this.color=color;
        this.x = x;
        this.y = y;
    };

    var senderId = new Date().getTime();

    canvas.onmousedown = function (e) {
        console.log(3349)
        var color = color16();
        var point = new Point(senderId, true,color, e.offsetX, e.offsetY);
        line.push(point);

        context.strokeStyle = color;
        context.beginPath();
        context.moveTo(point.x, point.y);
        canvas.onmousemove = function (e) {
            var point = new Point(senderId, false, color, e.offsetX, e.offsetY);
            line.push(point);
            context.lineTo(point.x, point.y);
            context.stroke();
        };

        document.onmouseup = function () {
            canvas.onmousemove = null;
            document.onmouseup = null;
        }

    };

    // canvas.addEventListener('touchstart',(e)=>{
    //     var color = color16();
    //     var point = new Point(senderId, true,color, e.offsetX, e.offsetY);
    //     line.push(point);
    //     context.strokeStyle = color;
    //     context.beginPath();
    //     context.moveTo(point.x, point.y);
    //     canvas.addEventListener('touchmove',(e)=>{
    //         var point = new Point(senderId, false, color, e.offsetX, e.offsetY);
    //         line.push(point);
    //         context.lineTo(point.x, point.y);
    //         context.stroke();
    //     }); //结束
    //     document.addEventListener('touchend',()=>{
    //         canvas.addEventListener('touchmove',null)
    //         document.addEventListener('touchend',null)
    //     })
    // }); 

   



    goEasy.subscribe({
        channel: "draw_line",
        onMessage: function (message) {
			console.log(message)
            var line = JSON.parse(message.content);
			console.log(line)
            if(line.content==='我进来啦'){
                console.log('有人进来了')
            }else{
                for (var i = 0; i < line.length; i++) {
                var point = line[i];
                if (point.senderId == senderId) {
                    return;
                }
                if (point.move) {
                    context.strokeStyle=point.color;
                    context.beginPath();
                    context.moveTo(point.x, point.y);
                } else {
                    context.lineTo(point.x, point.y);
                    context.stroke();
                }
            }
            }
        },
        onSuccess: function () {
            console.log("Channel订阅成功。");
        },
        onFailed: function (error) {
            console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
        }
    });

    var delay = 500;//一秒同步一次，适当降低同步頻率，节约消息使用量，不影响上课效果
    var start = 0;
    var end;

    function refresh() {
        end = line.length;
        var message = line.slice(start, end);
        if (message.length > 1) {
            start = end;
            goEasy.publish({
                channel: "draw_line",
                message: JSON.stringify(message),
                onSuccess: function () {
                    console.log("消息发布成功。");
                },
                onFailed: function (error) {
                    console.log("消息发送失败，错误编码：" + error.code + " 错误信息：" + error.content);
                }
            });
        }
        setTimeout(refresh, delay);
    }

    refresh()

</script>

</body>
</html>